<template>
  <div class="news-page section-padding bg-neutral">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl md:text-3xl font-bold text-center mb-10 text-primary">科研新闻</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 新闻1 -->
        <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
          <div class="h-48 bg-gray-200 flex items-center justify-center">
            <img src="https://picsum.photos/400/200?random=20" alt="讲座新闻" class="max-w-full h-full object-cover">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center text-sm text-gray-500 mb-2">
              <span><i class="fa fa-calendar mr-1"></i> 2025年10月31日</span>
              <span><i class="fa fa-user mr-1"></i> 陈光灿</span>
            </div>
            <h3 class="text-lg font-bold mb-2 text-gray-800">通信与信息工程学院举办职业生涯规划专题讲座</h3>
            <p class="text-gray-700 text-sm leading-relaxed mb-4">
              10月30日下午，通信与信息工程学院在图书馆国际会议中心举办专题讲座，邀请原院长谢永斌教授主讲，2024级、2025级本科生参加。
            </p>
            <a href="#" class="text-secondary text-sm font-medium hover:underline">查看详情 <i class="fa fa-angle-right ml-1"></i></a>
          </div>
        </div>

        <!-- 新闻2 -->
        <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
          <div class="h-48 bg-gray-200 flex items-center justify-center">
            <img src="https://picsum.photos/400/200?random=21" alt="运动会新闻" class="max-w-full h-full object-cover">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center text-sm text-gray-500 mb-2">
              <span><i class="fa fa-calendar mr-1"></i> 2025年5月15日</span>
              <span><i class="fa fa-user mr-1"></i> 低空经济研究院</span>
            </div>
            <h3 class="text-lg font-bold mb-2 text-gray-800">西安邮电大学第三十一届运动会顺利举办</h3>
            <p class="text-gray-700 text-sm leading-relaxed mb-4">
              学校举办第三十一届运动会，弘扬“求是奋进”精神，低空经济研究院师生积极参与，展现团队协作与拼搏精神，在多个项目中取得优异成绩。
            </p>
            <a href="#" class="text-secondary text-sm font-medium hover:underline">查看详情 <i class="fa fa-angle-right ml-1"></i></a>
          </div>
        </div>

        <!-- 新闻3 -->
        <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
          <div class="h-48 bg-gray-200 flex items-center justify-center">
            <img src="https://picsum.photos/400/200?random=22" alt="期刊新闻" class="max-w-full h-full object-cover">
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center text-sm text-gray-500 mb-2">
              <span><i class="fa fa-calendar mr-1"></i> 2025年3月20日</span>
              <span><i class="fa fa-user mr-1"></i> 科研处</span>
            </div>
            <h3 class="text-lg font-bold mb-2 text-gray-800">《西安邮电大学学报》再次入选中国科技核心期刊</h3>
            <p class="text-gray-700 text-sm leading-relaxed mb-4">
              近日，《西安邮电大学学报》再次入选“中国科技核心期刊”，标志着期刊在学术质量、影响力与行业认可度上再获肯定。
            </p>
            <a href="#" class="text-secondary text-sm font-medium hover:underline">查看详情 <i class="fa fa-angle-right ml-1"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuestNewsList', // 与文件名一致
  // 若有新闻数据逻辑（如列表请求、分页），可添加在这里
  data() {
    return {
      newsList: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    // 加载新闻数据
    this.loadNews()
  },
  methods: {
    loadNews() {
      // 数据请求逻辑
    }
  }
}
</script>

<style scoped>
.section-padding {
  @apply py-12 md:py-16;
}
.card-hover {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}
</style>